<script lang="ts">
    import { goto } from "$app/navigation";
    import { stringify } from "postcss";

    export let display_mode = "List";
    function routeToPage(route: string, replaceState: boolean) {
        console.log("call routeToPage ", route, replaceState);
        goto(`${route}`, { replaceState });
    }
</script>

<div class="w-full flex flex-col">
    <div class="flex flex-wrap whitespace-nowrap mx-2">
        <div class="flex flex-row mt-2  mr-2  bg-gray-300">
            <span>Message1.svelte display_mode={display_mode}</span>
            <button class="text-white mx-2">X</button>
        </div>
        <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
            <span class="">Category: Fashion Jewelry Bracelets & Bangles</span>
            <button class="text-white mx-2">X</button>
        </div>
        <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
            <span>Message1.svelte display_mode={display_mode}</span>
            <button class="text-white mx-2">X</button>
        </div>
        <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
            <span>Category: Fashion Jewelry Bracelets & Bangles</span>
            <button class="text-white mx-2">X</button>
        </div>
        <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
            <span>Message1.svelte display_mode={display_mode}</span>
            <button class="text-white mx-2">X</button>
        </div>
        <div class="flex flex-row  mt-2 mr-2 bg-gray-300">
            <span>Category: Fashion Jewelry Bracelets & Bangles</span>
            <button class="text-white mx-2">X</button>
        </div>
    </div>

    <div class="flex flex-row mt-2 h-full overflow-scroll">
        {#if display_mode == "List"}
            <table
                class="table-auto border-collapse border border-l-0 border-slate-400 w-full"
            >
                <thead>
                    <tr>
                        <th
                            class="border border-l-0 border-slate-300 text-xs font-bold whitespace-nowrap"
                            >Message Name Message1</th
                        >
                        <th class="border border-slate-300 text-xs font-bold"
                            >Ticker</th
                        >
                        <th class="border border-slate-300 text-xs font-bold"
                            >Last Close Price</th
                        >
                        <th class="border border-slate-300 text-xs font-bold"
                            >% Price Change</th
                        >
                        <th class="border border-slate-300 text-xs font-bold"
                            >P/E Ratio</th
                        >
                        <th class="border border-slate-300 text-xs font-bold"
                            >Relative P/E Ratio</th
                        >
                        <th class="border border-slate-300 text-xs font-bold"
                            >Div'D YLD</th
                        >

                        <th class="border border-slate-300 text-xs font-bold"
                            >Timeliness™</th
                        >
                        <th class="border border-slate-300 text-xs font-bold">
                            Previous Timeliness™
                        </th>
                        <th class="border border-slate-300 text-xs font-bold"
                            >Safety™</th
                        >

                        <th
                            class="border border-slate-300 text-xs font-bold whitespace-nowrap"
                            >Target Price Range</th
                        >

                        <th class="border border-slate-300 text-xs font-bold">
                            Financial Strength
                        </th>
                        <th class="border border-slate-300 text-xs font-bold">
                            Stock's Price Stability
                        </th>
                        <th class="border border-slate-300 text-xs font-bold">
                            Price Growth Persistence
                        </th>
                        <th class="border border-slate-300 text-xs font-bold">
                            Earnings Predictability
                        </th>

                        <th class="border border-slate-300 text-xs font-bold"
                            >Stock Report</th
                        >
                        <th class="border border-slate-300 text-xs font-bold"
                            >Industry Analysis</th
                        >
                    </tr>
                </thead>
                <tbody>
                    {#each Array(300) as _, i}
                        <tr
                            tabindex={i}
                            on:dblclick={(event) => {
                                console.log(
                                    "tr click event=",
                                    JSON.stringify(event)
                                );
                                routeToPage(
                                    "/company_list_universe/Detail",
                                    true
                                );
                            }}
                            class="cursor-pointer hover:bg-rose-300"
                        >
                            <td
                                class="border border-l-0 border-slate-300 text-xs whitespace-nowrap px-2"
                                >3M Message xisiafj {i}</td
                            >
                            <td class="border border-slate-300 text-xs px-2"
                                >MMM{i}</td
                            >
                            <td class="border border-slate-300 text-xs  px-2 "
                                >$148.60</td
                            >
                            <td
                                class="border border-slate-300 text-xs text-red-600 px-2"
                                >-2.95%</td
                            >
                            <td class="border border-slate-300 text-xs  px-2 "
                                >15.7</td
                            >
                            <td class="border border-slate-300 text-xs px-2"
                                >0.85</td
                            >
                            <td class="border border-slate-300 text-xs  px-2 "
                                >1.3%</td
                            >

                            <td class="border border-slate-300 text-xs px-2"
                                >4</td
                            >
                            <td class="border border-slate-300 text-xs  px-2 "
                                >3</td
                            >
                            <td class="border border-slate-300 text-xs px-2"
                                >1</td
                            >
                            <td
                                class="border border-slate-300 text-xs  px-2 whitespace-nowrap"
                            >
                                $200.00 - $270.00
                            </td>
                            <td class="border border-slate-300 text-xs px-2"
                                >A++</td
                            >
                            <td class="border border-slate-300 text-xs  px-2 "
                                >70</td
                            >
                            <td class="border border-slate-300 text-xs px-2"
                                >60</td
                            >
                            <td class="border border-slate-300 text-xs  px-2 "
                                >55</td
                            >
                            <td class="border border-slate-300 text-xs px-2">
                                PDF<i class="fa-solid fa-file-pdf" />
                            </td>
                            <td class="border border-slate-300 text-xs px-2 "
                                >Lock</td
                            >
                        </tr>
                    {/each}
                </tbody>
            </table>
        {:else}
            <div class="mx-2 grid justify-center grid-cols-4 gap-2 mb-4">
                {#each Array(300) as _, i}
                    <div class="rounded-lg shadow-lg bg-white max-w-sm">
                        <a
                            href="#!"
                            data-mdb-ripple="true"
                            data-mdb-ripple-color="light"
                        >
                            <img
                                class="rounded-t-lg"
                                src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
                                alt=""
                            />
                        </a>
                        <div class="p-6">
                            <h5 class="text-gray-900 text-xl font-medium mb-2">
                                Card title
                            </h5>
                            <p class="text-gray-700 text-base mb-4">
                                Some quick example text to build on the card
                                title and make up the bulk of the card's
                                content.
                            </p>
                            <button
                                type="button"
                                class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                            >
                                Button{i}
                            </button>
                        </div>
                    </div>
                {/each}
            </div>
        {/if}
    </div>
</div>
